<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../lib/vue-2.6.7.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" name="a" v-model.number="a">
        <select name="name"  id="" v-model="select">
            <option  value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" name="b" v-model.number="b">
        <input type="button" value="="  @click="calculate">
        <input type="text" name="value" id="d" v-model.number="c">
    </div>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                a:null,
                b:null,
                select:"",
                c:null
            },
            methods: {
                calculate(){
                    switch (this.select) {
                        case "+":
                            this.c=this.a+this.b;
                            break;
                        case "-":
                            this.c=this.a-this.b;
                            break;
                        case "*":
                        this.c=this.a*this.b;
                        break;
                        default:
                        this.c=this.a/this.b;
                        break;
                    }
                }
            },
        })
    </script>
</body>
</html>